<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
<link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/jquery-easyui-1.3.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/jquery-easyui-1.3.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/jquery-easyui-1.3.3/demo/demo.css">
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery-easyui-1.3.3/jquery.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
	<script src="${pageContext.request.contextPath}/static/Highcharts-5.0.14/code/highcharts.js"></script>
	<script src="${pageContext.request.contextPath}/static/Highcharts-5.0.14/code/modules/exporting.js"></script>
	<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
	<!-- 貌似Highcharts的js文件有些与easyui的冲突，需要删掉某些没用的，否则界面停滞不动 -->
</head>
<body>
	<div id="container" style="min-width:400px;height:320px"></div>
	
	<table id="dg" class="easyui-datagrid" title="实时频谱监控数据表格" style="width:700px;height:100%"
			data-options="singleSelect:true,collapsible:false" fitColumns="true" fit="true" >
		<thead>
			<tr>
				<th data-options="field:'frontProcessorID',width:80,align:'center'">前置机号</th>
				<th data-options="field:'recordID',width:100,align:'center'">文件记录号</th>
				<th data-options="field:'downGain',width:80,align:'center'">下行增益</th>
				<th data-options="field:'upGain',width:80,align:'center'">上行增益</th>
				<th data-options="field:'timeStamp',width:80,align:'center'">时间戳</th>
				<th data-options="field:'timeStampStr',width:80,align:'center'">时间</th>
				<th data-options="field:'data',formatter:formatData,width:80,align:'center'">数据</th>
				<th data-options="field:'cellInfo',width:80,align:'center'">单元信息</th>
			</tr>
		</thead>
	</table>
		<!-- <th data-options="field:'data',width:80,align:'center'">数据</th> -->
		<!-- ,url:'${pageContext.request.contextPath}/frequencySpectrum/list.do' -->
	<script>
	function formatData(val,row){
		return row.data.Data;
		        };

	var frequencySpectrum_CURRENT_QUANTITY;
	
	var toArray = function(s){  
	    try{  
	        return Array.prototype.slice.call(s);  
	    } catch(e){  
	            var arr = [];  
	            for(var i = 0,len = s.length; i < len; i++){  
	                //arr.push(s[i]);  
	                 arr[i] = s[i];     //据说这样比push快
	            }  
	             return arr;  
	    } 
	}

	function getData(){
		var url = "${pageContext.request.contextPath}/frequencySpectrum/list.do";  
		var data = {type:1};
		$.ajax({   type : "get",   async : false, //同步请求   
			url : url,   
			data : data,   
			timeout:1000,   
			success:function(dates){
				//转为JSON对象
			var dataObj=eval("("+dates+")"); 
			//var dataObj = {"total":28,"rows":[{"frontProcessorID":"111","recordID":"Koi","downGain":10.00,"upGain":"P","timeStamp":36.50,"timeStampStr":"Large","cellInfo":"EST-1"}]};
		
				$("#dg").datagrid("loadData",dataObj);  
					
			},   
			error: function() {
				alert("获取数据失败，请稍后再试！");
			}  
			});   
	} 


	Highcharts.setOptions({
	    global: {
	        useUTC: false
	    }
	});
		
	Highcharts.setOptions({
	    // 所有语言文字相关配置都设置在 lang 里
	    lang: {
	        resetZoom: '重置',
	        resetZoomTitle: '重置缩放比例'
	    }
	});


	$(function () {
	    $('#container').highcharts({
	    	credits:{
			     enabled:false // 禁用版权信息
			},
	        chart: {
	            type: 'spline',
	            	zoomType: 'xy',
	    	        animation: Highcharts.svg, // don't animate in old IE
	    	        marginRight: 10,
	    	        events: {
	    	            load: function () {
	    	                // set up the updating of the chart each second
	    	                var series_frequencySpectrum = this.series[0];
	    	                
	    	                var chart = this;
	    	                setInterval(function () {
	    	                	getData();
	    	                	
	    	                	var currentTime = new Date();
	    	                    var x = (currentTime).getTime(); // current time
	    	                    
	    	                    var y_frequencySpectrum_CURRENT_QUANTITY = Math.random();
	    	                    
	    	                     /*  var obj = {"total":100,"rows":[
	    	                    	{"dataType":"频谱","currentTime":currentTimeStr,"filesNumber":y_frequencySpectrum_CURRENT_QUANTITY},
	    	                    	{"dataType":"SACCH","currentTime":currentTimeStr,"filesNumber":y_sACCH_CURRENT_QUANTITY},
	    	                    	{"dataType":"SDCCH","currentTime":currentTimeStr,"filesNumber":y_sDCCH_CURRENT_QUANTITY},
	    	                    	{"dataType":"FACCH","currentTime":currentTimeStr,"filesNumber":y_fACCH_CURRENT_QUANTITY},
	    	                    	{"dataType":"TCH","currentTime":currentTimeStr,"filesNumber":y_tCH_CURRENT_QUANTITY}
	    	                    	]};   
	    	                    $("#dg").datagrid("loadData",obj);   */
	    	                    var arr = [Math.random(),Math.random(),Math.random(),Math.random(),Math.random(),Math.random(),Math.random(),Math.random(),Math.random()];
	    	                    
	    	                    //arr=toArray(arr);
	    	                    series_frequencySpectrum.setData(arr);
	    	                    
	    	                    
	    	                }, 1000);
	    	            }
	    	        }
	        },
	        title: {
	            text: '实时频谱监控'
	        },
	        xAxis: {
	        	title: {
	                text: '频率（MHz）'
	            },
	            categories: ['885', '885.5', '886', '886.5', '887', '887.5',
	                         '888', '888.5', '889']
	        },
	        yAxis: {
	            title: {
	                text: '频谱值'
	            },
	            labels: {
	                formatter: function () {
	                    return this.value + '';
	                }
	            }
	        },
	        tooltip: {
	            crosshairs: true,
	            shared: true
	        },
	        plotOptions: {
	            spline: {
	                marker: {
	                    radius: 4,
	                    lineColor: '#666666',
	                    lineWidth: 1
	                }
	            }
	        },
	        series: [{
	            name: '频谱',
	            marker: {
	                symbol: 'square'
	            },
	            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3]
	        }]
	    });
	});
</script>
</body>
</html>